<template>
  <j-modal :title="title" :width="700" :visible="visible" switchFullscreen @cancel="handleCancel" @ok="handleOk"
    :cancelButtonProps="footerBtnProps" :okButtonProps="footerBtnProps">
    <a-form-model ref="form" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="机构区域：" prop="level" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
            <z-linkage-area placeholder="请选择机构区域" v-model="form.level" @rows="onRows"/>
          </a-form-model-item>
        </a-col>
        
        <a-col :span="12">
          <a-form-model-item label="机构名称：" prop="organizationName">
            <a-input v-model="form.organizationName" placeholder="请输入" :disabled="disabled" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="负责人：" prop="personCharge">
            <a-input v-model="form.personCharge" placeholder="请输入" :disabled="disabled" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="组织形式：" prop="organizationForm">
            <a-select v-model="form.organizationForm" placeholder="请选择" :disabled="disabled">
              <a-select-option value="1">
                合伙
              </a-select-option>
              <a-select-option value="2">
                个人
              </a-select-option>
              <a-select-option value="3">
                合资
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="联系电话：" prop="phone">
            <a-input v-model="form.phone" placeholder="请输入" :disabled="disabled" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="电子邮箱：" prop="mail">
            <a-input v-model="form.mail" placeholder="请输入" :disabled="disabled" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="网站网址：" prop="webAddress">
            <a-input v-model="form.webAddress" placeholder="请输入" :disabled="disabled" />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-form-model-item label="机构地址：" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" prop="organization">
        <a-textarea v-model="form.organization" placeholder="请输入" :auto-size="{ minRows: 2, maxRows: 5 }"
          :disabled="disabled" />
      </a-form-model-item>
      <a-form-model-item label="机构简介：" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" prop="introduction">
        <a-textarea v-model="form.introduction" placeholder="请输入" :auto-size="{ minRows: 2, maxRows: 5 }"
          :disabled="disabled" />
      </a-form-model-item>
    </a-form-model>
  </j-modal>
</template>
<script>
  import {
    getXzqhList,
    getXzqhByCode,
  } from '@/api/api'
  import {
    addMech
  } from '@/api/sjsk/psycholog/organize'
  import {
    mapGetters
  } from 'vuex'
  export default {
    props: {
      disabled: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      ...mapGetters(["userInfo"]),
      footerBtnProps: function() {
        return {
          style: {
            display: this.disabled ? 'none' : 'inline-block'
          }
        }
      }
    },
    data() {
      return {
        title: '新增机构',
        visible: false,
        areaOptions: [],
        form: {
          "areaLevel": "",
          "areaName": "",
          "mail": "",
          "organization": "",
          "introduction": "",
          "organizationName": "",
          "organizationForm": '',
          "phone": "",
          "personCharge": "",
          "webAddress": ""
        },
        rules: {
          level: [{
            required: true,
            type: 'array',
            message: '请选择机构区域',
            trigger: ['trigger']
          }],
          organizationForm: [{
            required: true,
            
            message: '请选择组织形式',
            trigger: ['trigger']
          }],
          personCharge: [{
            required: true,
            message: '请输入负责人',
            trigger: ['trigger']
          }],
          introduction: [{
            required: true,
            message: '请输入机构简介',
            trigger: ['trigger']
          }],
          mail: [{
            required: true,
            type: 'email',
            message: '请输入电子邮箱',
            trigger: ['trigger']
          }],
          organization: [{
            required: true,
            message: '请输入机构地址',
            trigger: ['trigger']
          }],
          organizationName: [{
            required: true,
            message: '请输入机构名称',
            trigger: ['trigger']
          }],
          phone: [{
            required: true,
            message: '请输入联系电话',
            trigger: ['trigger']
          },{
            pattern: '^1(3|4|5|7|8)\\d{9}$',
            message: '手机号码格式不正确'
          }],
          webAddress: [{
            required: true,
            message: '请输入网站网址',
            trigger: ['trigger']
          }],
        }
      }
    },
    async created() {
      this.getXzqh()
    },
    methods: {
      getXzqh() {
        getXzqhByCode({
          codeList: [460000000000]
        }).then((res) => {
          if (res.success) {
            this.areaOptions = res.result.map(item => {
              item.isLeaf = false
              return item
            })
          }
        })
      },
      loadCascader(selectedOptions) {
        console.log(selectedOptions)
        const targetOption = selectedOptions[selectedOptions.length - 1];
        targetOption.loading = true;
        getXzqhList({
          level: targetOption.level + 1,
          parent: targetOption.code
        }).then(async (res) => {
          if (res.success) {
            targetOption.loading = false
            targetOption.children = res.result.map(item => {
              item.isLeaf = false
              return item
            })
            this.areaOptions = [...this.areaOptions];
            console.log(this.areaOptions)
          }
        })
      },
      onRows(row) {
        // console.log("value")
        console.log(row)
        let str = ""
        row.forEach(item => {
          str += item.title + "," //保存行政区划名称
        })
        this.form.areaName = str.slice(0, str.length - 1) //删除最后一个逗号
        this.form.departmentId = row[row.length - 1].key //删除最后一个逗号
        // console.log(this.form.interviewPlace)
      },
      
      async show(data, department) {
        this.visible = true
        if (data) {
          this.title = '编辑机构'
          const formData = JSON.parse(JSON.stringify(data))
          formData.level = formData.level.split(',')
          this.form = formData
        } else {
          this.title = '新增机构'
          console.log(department)
          
          this.form = {
            "departmentId": '',
            level: '',
            "areaName": '',
            "mail": "",
            "organization": "",
            "introduction": "",
            "organizationName": "",
            "organizationForm": '',
            "phone": "",
            "personCharge": "",
            "webAddress": ""
          }
        }
        if (this.disabled) {
          this.title = '机构详情'
        }
      },
      onTimeChange() {

      },
      handleCancel() {
        this.visible = false
      },
      handleOk() {
        this.$refs.form.validate().then(res => {
          const form = JSON.parse(JSON.stringify(this.form))
          form.level = form.level.toString()
          addMech(form).then(res => {
            this.visible = false
            this.$emit('success')
          }).catch(err => {
            this.$message.error(res.message)
          })
        })

      }
    },
  }
</script>
<style lang="less" scoped>
  /deep/.ant-form-item {
    margin-bottom: 10px;
  }
  /deep/.ant-input-number-handler-wrap {
      display: none;
  }

</style>
